import React, { Component } from 'react';

// import NativeEventDemo from '@/components/charp2/NativeEventDemo';
// import QrCode from '@/components/charp2/QrCode';
// import Qr2 from '@/components/charp2/QrCode2';
// import FormDemo from '@/components/charp2/FormDemo';
// import FormDemo2 from '@/components/charp2/FormDemo2';
// import FormDemo3 from '@/components/charp2/FormDemo3';
// import StyleDemo from '@/components/charp2/StyleDemo';
// import Button from '@/components/charp2/Button';
// import List from '@/components/charp2/List/List';
// import List2 from '@/components/charp2/List2/List';
// import NewContextDemo from '@/components/charp2/NewContextDemo';
import List from '@/components/charp2/EventEmitter/List';
import emitter from '@/components/charp2/EventEmitter/events';
import Btn from '@/components/charp2/demo01/Button';
import Box from '@/components/charp2/demo01/Box';
import Demo1 from '@/components/charp2/higherOrder/Demo';
import Input from '@/components/charp2/higherOrder/Input';
import Demo2 from '@/components/charp2/higherOrder/Demo2';
import PureRenderDemo from '@/components/charp2/PureRender/PureRenderDemo';
import NameItem from '@/components/charp2/PureRender/NameItem';

class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      list: [
        {
          text: 'aaa',
          checked: false
        },
        {
          text: 'bbb',
          checked: true
        },
        {
          text: 'ccc',
          checked: false
        }
      ],
      open: false,
      class1: ''
    };
    this.itemChange = null;
    this.defaultStyle = {};
    this.fnClick = this.fnClick.bind(this);
  }
  componentDidMount () {
    this.itemChange = emitter.on('ItemChange', data => {
      console.log('on data', data);
    });
  }
  componentWillUnmount () {
    emitter.removeListener(this.itemChange);
  }
  handleClick (arg, e) {
    console.log(arg, e);
  }
  // 不传参，可以使用双冒号调用
  handleClick2 (e) {
    console.log(e);
  }
  fnItemChange (item) {
    console.log(item);
  }
  fnChange (e) {
    this.setState({class1: e.target.value});
  }
  fnClick () {}
  render() {
    return (
      <div>
        App
        {/* <button onClick={this.handleClick.bind(this, 'test')}>test</button> */}
        {/* <button onClick={::this.handleClick2}>Test2</button> */}
        <hr/>
        {/* <NativeEventDemo></NativeEventDemo> */}
        {/* <QrCode></QrCode> */}
        {/* <Qr2></Qr2> */}
        {/* <FormDemo2></FormDemo2> */}
        {/* <FormDemo3></FormDemo3> */}
        <hr/>
        {/* <StyleDemo></StyleDemo> */}
        {/* <Button></Button> */}
        {/* <List title="List" list={this.state.list} fnItemChange={this.fnItemChange.bind(this)}></List> */}
        <hr/>
        {/* <List2 list={this.state.list}></List2> */}
        <hr/>
        {/* <NewContextDemo></NewContextDemo> */}
        {/* <List list={this.state.list}></List>
        <hr/>
        <Btn color="blue"></Btn>
        <Btn color="pink"></Btn>
        <Box></Box> */}
        {/* <Demo1 color="red"></Demo1> */}
        <Input></Input>
        <Demo2 login={false}></Demo2>
        <hr/>
        <input type="text" value={this.state.class1} onChange={this.fnChange.bind(this)}/>
        <PureRenderDemo className={this.state.class1}></PureRenderDemo>
        <hr/>
        <NameItem onClick={this.fnClick} style={this.state.style || this.defaultStyle}></NameItem>
      </div>
    )
  }
}

export default App;
